<template>
  <div>
    <Row :gutter="20">
      <i-col v-for="(item, index) in device_list" :key="index" span="6">
        <card class="card">
          <Row style="height: 200px">
            <i-col span="8" class="flex-class">
<!--              <img src="../../../../static/images/speaker/3.jpeg" class="image" alt="">-->
              <Avatar style="background-color: rebeccapurple" size="100">串口</Avatar>
            </i-col>
            <i-col span="16" class="detail-class">
              <div style="margin-left: 30px">
                <p><span class="title">音箱SN码：</span>{{ item.sn }}</p>
                <p><span class="title">ROM版本：</span>{{ item.rom_version }}</p>
                <p><span class="title">ROM信息：</span>{{ item.detail }}</p>
                <p>
                  <span class="title">设备类型：</span>
                  <Tag :color="checkColorType(item.device_type)">{{ checkTitleType(item.device_type) }}</Tag>
                </p>
                <p>
                  <span class="title">运行状态：</span>
                  <Tag :color="item.run_status=== 0 ? 'success' : 'error'">{{ item.run_status=== 0 ? '闲置中' : '运行中' }}</Tag>
                </p>
              </div>
            </i-col>
          </Row>
        </card>
      </i-col>
    </Row>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
export default {
  name: "DeviceInfo",
  mounted() {
    this.spinShow = true
    this.$getRequest('/speakerDetail/').then(response=>{
      if(response){
        this.spinShow = false
        this.device_list = response.data
      }
    }).catch(error=>{
      console.log(error)
    })
  },
  data () {
    return {
      device_list: [],
      spinShow: false
    }
  },
  methods: {
    checkColorType(device_type){
      switch (device_type){
        case 0:
          return '#19be6b'
        case 1:
          return '#ff9900'
        case 2:
          return '#2db7f5'
      }
    },
    checkTitleType(device_type){
      switch (device_type){
        case 0:
          return 'Linux'
        case 1:
          return 'Rtos'
        case 2:
          return 'Android'
      }
    }
  }
}
</script>

<style scoped>
.card{
  min-height: 200px;
  margin-bottom: 20px;
}
.image{
  width: 150px;
  height: 150px;
}
.flex-class{
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-class{
  display: flex;
  /*justify-items: center;*/
  align-items: center;
}
.title{
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}
</style>
